/*
 * @Description: 媒体信息按钮组件
 * @Author: Rfan
 * @Date: 2022-09-24 10:22:57
 * @LastEditTime: 2022-09-29 11:58:20
 */

import { Button, Popover } from 'antd';
import MediaBaseInfo from './MediaBaseInfo';
import MediaGroupInfo from './MediaGroupInfo';
import mediaStyles from '../../styles/mediaInfo.module.scss';
import classNames from 'classnames/bind';

const mediaCx = classNames.bind(mediaStyles);

// 基础媒体信息类型
export interface IMediaBaseInfo {
  [K: string]: string;
}

// 分组媒体信息类型
export interface IMediaGroupInfo {
  [K: string]: IMediaBaseInfo;
}
const videoExts = ['mp4', 'avi', 'flv', 'wmv'];
const audioExts = ['mp3', 'wav', 'flac', 'ogg'];
const imageExts = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
const mediaExts = videoExts.concat(audioExts, imageExts);

/**
 * @description: 判断是否为图片文件
 * @param {string} ext
 * @return {boolean} 判断结果
 */
const isImgFile = (ext: string): boolean => {
  return imageExts.indexOf(ext) >= 0;
};

const MediaInformation = (props: any) => {
  const { selectItem, commonMedia } = props;
  console.log(selectItem);

  return (
    <>
      {mediaExts.indexOf(selectItem.file_ext) >= 0 ? (
        <Popover
          content={
            <div className={mediaCx('media-popover')}>
              {isImgFile(selectItem.file_ext) ? (
                <MediaGroupInfo data={selectItem.file_metadata as IMediaGroupInfo} />
              ) : (
                <MediaBaseInfo
                  data={{ ...commonMedia, ...selectItem.file_metadata } as IMediaBaseInfo}
                />
              )}
            </div>
          }
          trigger={['click']}
          placement="bottom"
          zIndex={1200}
        >
          <Button type="text" size="small">
            媒体信息
          </Button>
        </Popover>
      ) : (
        ''
      )}
    </>
  );
};
export default MediaInformation;
